<template>
  <!-- 整个用户相关信息及操作的外层容器 -->
  <view class="user">
    <!-- 上方显示用户信息的区域 -->
    <view class="userinfo">
      <!-- 具体的用户信息展示区域 -->
      <view class="top">
        <!-- 用于显示用户头像的区域 -->
        <view class="avator">
          <!-- 使用uni-icons组件展示一个填充的人物图标，其大小为30，颜色绑定logColor变量 -->
          <uni-icons type="person-filled" size="30" :color="logColor"></uni-icons>
        </view>
        <!-- 根据用户是否登录来显示不同内容，v-if表示登录时显示以下内容 -->
        <view class="uanme" v-if="store.isLogin">
          <!-- 显示账号信息，通过插值表达式绑定store.userInfo.name来展示具体账号名 -->
          <view>账号：{{store.userInfo.name}}</view> 
          <!-- 显示电话号码信息，通过插值表达式绑定store.userInfo.phone来展示具体电话号码 -->
          <view>电话：{{store.userInfo.phone}}</view> 
        </view>
        <!-- v-else表示未登录时显示“点击登录”文本，并且绑定了toLogin点击事件，点击可跳转到登录页面 -->
        <view class="uname" v-else @tap="toLogin">点击登录</view>
      </view>
    </view>
    <!-- 下方显示的四项用户操作项的区域 -->
    <view class="list">
      <uni-list>
        <!-- 通过v-for循环遍历manageList数组来生成多个uni-list-item操作项 -->
        <uni-list-item v-for="item,index in manageList" :title="item.name" :show-extra-icon="true"
          :extra-icon="item.icon" clickable link @tap="navto(index)"></uni-list-item>
      </uni-list>
    </view>
  </view>
</template>

<script setup>
  // 从vue中引入ref函数，用于创建响应式数据
  import {
    ref
  } from 'vue'
  // 引入自定义的userStore模块，用于获取用户相关的状态和信息
  import {
    userStore
  } from '@/store/userStore.js'
  // 创建一个响应式变量logColor，初始值设置为"#ccc"，用于控制头像图标的颜色
  let logColor = ref("#ccc")
  // 获取userStore实例，后续可通过它访问用户相关数据和状态
  let store = userStore()
  // 定义一个包含四个对象的响应式数组manageList，每个对象代表一个用户操作项的相关信息，如名称、图标等
  const manageList = ref([{
    name: '订单管理',
    icon: {
      color: '#56c48b',
      size: '22',
      type: 'shop'
    }
  }, {
    name: '地址管理',
    icon: {
      color: '#ff6700',
      size: '22',
      type: 'location-filled'
    }
  }, {
    name: '我的收藏',
    icon: {
      color: '#0225ff',
      size: '22',
      type: 'star'
    }
  }, {
    name: '设置',
    icon: {
      color: '#0081b9',
      size: '22',
      type: 'gear'
    }
  }])

  // navto函数，用于处理用户操作项的点击事件
  // 点击操作项时，通过uni.showToast弹出提示框，展示点击的是哪个操作项名称
  function navto(index) {
    uni.showToast({
      title: `你点击的是${manageList.value[index].name}`
    })
  }

  // toLogin函数，用于处理未登录时点击“点击登录”的情况
  // 点击“点击登录”后，通过uni.navigateTo进行页面导航，跳转到"/pages/login/login"页面
  function toLogin() {
    uni.navigateTo({
      url: "/pages/login/login"
    })
  }
</script>

<style lang="scss">
.user {
    // 设置整个用户区域的高度，通过计算视口高度减去95px来确定，使其适应页面布局
    height: calc(100vh - 95px);
    // 设置背景颜色为$uni-bg-color-grey（可能是定义在全局样式中的灰色，用于页面整体的背景色调）
    background-color: $uni-bg-color-grey;

 .userinfo {
      // 设置用户信息区域的高度为200px
      height: 200px;
      // 设置该区域的背景颜色为#8fb2c9（一种特定的浅蓝色）
      background-color: #8fb2c9;

   .top {
        // 使用flex布局，让内部元素在水平方向上排列并居中对齐
        display: flex;
        align-items: center;
        // 设置绝对定位，使其相对于最近的已定位祖先元素进行定位，此处距离左边50px，距离上边50px
        position: absolute;
        left: 50px;
        top: 50px;

     .avator {
          // 设置头像区域的宽度为50px
          width: 50px;
          // 设置头像区域的高度为50px
          height: 50px;
          // 设置背景颜色为白色，用于突出显示图标
          background-color: #fff;
          // 设置圆角为50%，使其呈现圆形外观
          border-radius: 50%;
          // 让内部文本（图标）在垂直方向上居中显示
          text-align: center;
          line-height: 50px;
        }

     .uname {
          // 设置文字颜色为白色，使其在背景上清晰显示
          color: #fff;
          // 设置字体大小为14px
          font-size: 14px;
          // 设置左边的内边距为5px，用于调整文本位置
          padding-left: 5px;
        }
      }
    }

 .list {
      // 设置操作项列表区域的宽度为710rpx（rpx是小程序中相对长度单位，可自适应不同屏幕尺寸）
      width: 710rpx;
      // 通过设置上下外边距为20rpx，并将左右外边距设置为auto，使该区域在水平方向上居中显示
      margin: 20rpx auto;
      // 以下是注释掉的样式，原本可能计划设置圆角和溢出隐藏效果，但暂时未启用
      // border-radius: 10px;
      // overflow: hidden;

    }
  }
</style>
```

通过添加这些注释，可以使代码的逻辑和各个部分的功能更加清晰易懂，方便后续的维护与扩展。 